<template lang="html">

  <div class="detail">
    <details-header message="产品详情" v-on:listenToChildEvent="showMsgFromChild"></details-header>
    <img src="../assets/image/54205424_big.jpg" alt="" />
    <p class="site-title">树懒果园 泰国进口大金煌芒果</p>

    <router-link to="/details/msg">
      <p class="site-cont">5斤装，约2-4个果，大！！！甜！！！</p>
    </router-link>
  </div>

</template>

<script>
import DetailsHeader from './detailsheader'
export default {
  methods:{
    showMsgFromChild:function (data) {
      console.log(data);
    }
  },
    components:{
      DetailsHeader
    }
}
</script>

<style lang="css">
  .details-box{
    width: 100%;
    height: 100px;
  }

  .detail {

      font-size: 12px;
    }
    .detail > img {
      display: block;
      width: 80%;

    }
    .detail > p {
      font-size: 1.1rem;
      line-height: 1.5rem;
      text-align: left;

    }
    .detail > p.site-title {
      color: #ff8000;
    }
    p.site-cont {
      color: #666;
      font-size: 0.9rem;
    }
    div.show{
      color: #f00;
      font-size: 0.9rem;
    }
</style>
